<route lang="json5" type="page">
{
  "needLogin": true,
  "style": {
    "navigationBarTitleText": "提现",
  }
}
</route>

<script lang="ts" setup>
import { computed, ref } from 'vue'

// 可用余额
const availableBalance = ref(2.90)

// 提现金额
const withdrawAmount = ref('')

// 银行卡信息 - 暂时移除
// const bankCard = ref({
//   bankName: '中国建设银行',
//   cardNumber: '**** **** **** 1234',
//   holderName: '张三',
// })

// 计算提现后余额
const balanceAfterWithdraw = computed(() => {
  const amount = Number(withdrawAmount.value) || 0
  return Math.max(0, availableBalance.value - amount)
})

// 验证提现金额
const canWithdraw = computed(() => {
  const amount = Number(withdrawAmount.value) || 0
  return amount > 0 && amount <= availableBalance.value
})

// 全部提现
function withdrawAll() {
  withdrawAmount.value = availableBalance.value.toString()
}

// 提交提现
function submitWithdraw() {
  if (!canWithdraw.value) {
    if (!withdrawAmount.value) {
      uni.showToast({ title: '请输入提现金额', icon: 'none' })
    }
    else if (Number(withdrawAmount.value) > availableBalance.value) {
      uni.showToast({ title: '提现金额不能超过可用余额', icon: 'none' })
    }
    else {
      uni.showToast({ title: '提现金额必须大于0', icon: 'none' })
    }
    return
  }

  const amount = Number(withdrawAmount.value)
  if (amount < 1) {
    uni.showToast({ title: '最低提现金额为1元', icon: 'none' })
    return
  }

  uni.showModal({
    title: '确认提现',
    content: `提现金额：¥${amount.toFixed(2)}\n\n确认提现吗？`,
    success: (res) => {
      if (res.confirm) {
        uni.showLoading({ title: '提现中...' })

        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({ title: '提现申请已提交', icon: 'success' })

          setTimeout(() => {
            uni.navigateTo({ url: '/pages-user/user/wallet/withdraw/success' })
          }, 500)
        }, 2000)
      }
    },
  })
}

// 管理银行卡功能已移除
// function manageBankCard() {
//   uni.showToast({ title: '银行卡管理功能开发中', icon: 'none' })
// }
</script>

<template>
  <view class="withdraw-page min-h-screen bg-gray-50">
    <!-- 可用余额卡片 -->
    <wd-card custom-class="mx-3 mt-3">
      <view class="py-6 text-center">
        <view class="mb-2 text-sm text-gray-600">
          可用余额
        </view>
        <view class="mb-1 text-3xl text-blue-500 font-bold">
          ¥{{ availableBalance.toFixed(2) }}
        </view>
        <view class="text-xs text-gray-400">
          可提现余额
        </view>
      </view>
    </wd-card>

    <!-- 提现金额输入 -->
    <wd-card custom-class="mx-3 mt-3">
      <view class="pb-2">
        <view class="mb-4 text-black">
          提现金额
        </view>

        <view class="mb-4">
          <wd-input
            v-model="withdrawAmount"
            type="digit"
            placeholder="请输入提现金额"
            clearable
            size="large"
            input-mode="decimal"
          >
            <template #prefix>
              <text class="mr-2 text-gray-500">
                ¥
              </text>
            </template>
          </wd-input>

          <view class="mt-2 flex justify-end">
            <wd-button
              size="small"
              type="primary"
              plain
              @click="withdrawAll"
            >
              全部提现
            </wd-button>
          </view>
        </view>

        <view v-if="withdrawAmount" class="rounded-lg bg-blue-50 p-3 text-sm">
          <view class="flex items-center justify-between">
            <text class="text-gray-600">
              提现后余额
            </text>
            <text class="text-blue-600 font-medium">
              ¥{{ balanceAfterWithdraw.toFixed(2) }}
            </text>
          </view>
        </view>
      </view>
    </wd-card>

    <!-- 提现说明 -->
    <wd-card custom-class="mx-3 mt-3">
      <view class="pb-2">
        <view class="mb-4 text-black">
          提现说明
        </view>

        <view class="rounded-lg bg-yellow-50 p-3">
          <view class="text-xs text-gray-600 leading-relaxed">
            <view class="mb-1">
              提现金额将在1-3个工作日内到账
            </view>
            <view class="mb-1">
              最低提现金额为1元
            </view>
            <view>提现手续费：免费</view>
          </view>
        </view>
      </view>
    </wd-card>

    <!-- 底部提现按钮 -->
    <view class="fixed bottom-0 left-0 right-0 border-t border-gray-200 bg-white px-4 pt-4 pb-safe">
      <wd-button
        block
        type="primary"
        size="large"
        :disabled="!canWithdraw"
        @click="submitWithdraw"
      >
        <text v-if="withdrawAmount && canWithdraw">
          提现 ¥{{ Number(withdrawAmount).toFixed(2) }}
        </text>
        <text v-else>
          请输入提现金额
        </text>
      </wd-button>
    </view>

    <!-- 底部安全占位 -->
    <view class="h-20" />
  </view>
</template>

<style scoped>
</style>
